<!--
 * @Author: your name
 * @Date: 2020-08-22 01:51:42
 * @LastEditTime: 2020-08-26 21:19:41
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \exam-list\src\components\checkpaper\PaperDetail.vue
-->
<template>
  <div>
    <p>用户展示</p>

    <!-- 切换列表 -->
    <ul>
      <li
        v-for="(item,index) in routerList"
        :key="index"
        @click="change(index)"
        :class="{active:index===Aindex}"
      >{{item.name}}</li>
    </ul>
    <p style="fontSize:24px">{{title}}</p>

    <!-- 表格内容 -->
    <Table :columns="list" :data="data" style="margin:10px 0"></Table>
  </div>
</template>

<script>
import { mapActions, mapState } from 'vuex'
export default {
  data() {
    return {
      Aindex: 0,
      routerList: [
        {
          path: '/user/user',
          name: '用户数据'
        },
        {
          path: '/user/identity',
          name: '身份数据'
        },
        {
          path: '/user/api_authority',
          name: 'api接口权限'
        },
        {
          path: '/user/identity_api_authority_relation',
          name: '身份和api接口关系'
        },
        {
          path: '/user/view_authority',
          name: '视图接口权限'
        },
        {
          path: '/user/identity_view_authority_relation',
          name: '身份和视图权限关系'
        }
      ],
      title: ''
    }
  },
  methods: {
    ...mapActions('showUser', ['getList']),
    change(i) {
      this.Aindex = i
      const obj = {
        url: this.routerList[i].path,
        index: i
      }
      this.getList(obj)
      this.title = this.routerList[i].name
    }
  },
  computed: {
    ...mapState('showUser', ['data', 'list'])
  },
  created() {
    const obj = {
      url: this.routerList[this.Aindex].path,
      index: this.Aindex
    }
    this.getList(obj)
  }
}
</script>

<style lang="scss" scoped>
ul {
  width: 100%;
  display: flex;
  margin: 10px 0;
  li {
    padding: 5px;
    height: 30px;
    border: 1px solid #ccc;
  }
  .active {
    border: 1px solid blue;
    color: blue;
  }
}
</style>
